<template>
  <el-form :inline="true" :model="formInline" class="form-inline">

    <el-form-item label="Alt">
      <el-input v-model="formInline.alt" placeholder="请输入alt" />
    </el-form-item>

    <el-form-item label="Link">
      <el-input v-model="formInline.link" placeholder="请输入link" />
    </el-form-item>

    <el-form-item label="选择上传的文件">
      <input type="file" @change="getFile"/>
    </el-form-item>

    <el-form-item label="预览">
      <img :src="formInline.img" alt="" width="200">
    </el-form-item>

    <br/>

    <el-form-item>
      <el-button type="primary" @click="submitUpload">上传</el-button>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="toBannerList">跳转轮播图列表</el-button>
    </el-form-item>

  </el-form>
</template>
<script setup>
    import { reactive } from 'vue'
    import { bannerUploadApi } from '../../../../api/banner'
    import router from '../../../../router';

    const formInline = reactive({
        img : '',
        alt : 'nothing',
        link : 'nothing',
    })
    // console.log(formInline);
    // 上传图片
    const getFile = (e) => {

        // 图片数据
        const imgFile = e.target.files[0];
        // console.log(imgFile);

        //验证是否是图片
        if(!/image\/\w+/.test(imgFile.type)){  
            alert("看清楚，这个需要图片！");  
            return e.target.value = null;  
        }  

        if(imgFile){
            // 文件数据获取
            const reader = new FileReader();
            // console.log(reader);

            //图片转成base64
            reader.readAsDataURL(imgFile);
            //加载好后赋值
            reader.onload = () => {
                // console.log(reader.result);
                formInline.img = reader.result
                // console.log(formInline.img);
            }

        }
    }

    const submitUpload = async () => {
        // uploadRef.value.submit()
        await bannerUploadApi(formInline)
        // console.log(uploadBanner);
    }

    const toBannerList = () => router.push('bannerlist')
</script>
<style lang="scss" scoped>

</style>